<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport" />        
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> 
<meta content="telephone=no" name="format-detection" /> 
<title>我的订单</title>
<link rel="stylesheet" href="css/myOrder.css">
</head>
<body>
<div class="container">
	<div class="top flex">
		<a href="javascript:;" class="nav flex-1 active">全部</a>
		<a href="javascript:;" class="nav flex-1">已生效</a>
		<a href="javascript:;" class="nav flex-1">待支付</a>
		<a href="javascript:;" class="nav flex-1">已解约</a>
		<a href="javascript:;" class="nav flex-1">已到期</a>
	</div>
	<div class="list-wrap">
		<div class="order">
			<div class="top-bar">
				财富管理套餐之超值特色极致至尊版财富管理套餐之超值特色极致至尊版
				<span class="tag unpay">待支付</span>
				<!-- 已生效:effect
				已解约:outdeal -->
			</div>
			<div class="middle flex">
				<div class="m-l">
					<img src="images/top-right-pic.png" alt="">
				</div>
				<div class="m-r flex-1">
					投资决策主力版套餐为您提供投资决策资金流向、投资决策决策信号、信号、投资决策深资决策深资决策深资决策深
				</div>
			</div>
			<div class="bottom">
				<div class="b-l">产品编号：CP0101</div>
				<div class="b-r">2980/年</div>
			</div>
		</div>

		<div class="order">
			<div class="top-bar">
				财富管理套餐之超值特色极致至尊版财富管理套餐之超值特色极致至尊版
				<span class="tag outdeal">已解约</span>
				<!-- 已生效:effect
				已解约:outdeal -->
			</div>
			<div class="middle flex">
				<div class="m-l">
					<img src="images/top-right-pic.png" alt="">
				</div>
				<div class="m-r flex-1">
					投资决策主力版套餐为您提供投资决策资金流向、投资决策决策信号、信号、投资决策深资决策深资决策深资决策深
				</div>
			</div>
			<div class="bottom">
				<div class="b-l">产品编号：CP0101</div>
				<div class="b-r">2980/年</div>
			</div>
		</div>

		<div class="order">
			<div class="top-bar">
				财富管理套餐之超值特色极致至尊版财富管理套餐之超值特色极致至尊版
				<span class="tag effect">已生效</span>
				<!-- 已生效:effect
				已解约:outdeal -->
			</div>
			<div class="middle flex">
				<div class="m-l">
					<img src="images/top-right-pic.png" alt="">
				</div>
				<div class="m-r flex-1">
					投资决策主力版套餐为您提供投资决策资金流向、投资决策决策信号、信号、投资决策深资决策深资决策深资决策深
				</div>
			</div>
			<div class="bottom">
				<div class="b-l">产品编号：CP0101</div>
				<div class="b-r">2980/年</div>
			</div>
		</div>

		<div class="order">
			<div class="top-bar">
				财富管理套餐之超值特色极致至尊版财富管理套餐之超值特色极致至尊版
				<span class="tag effect">已生效</span>
				<!-- 已生效:effect
				已解约:outdeal -->
			</div>
			<div class="middle flex">
				<div class="m-l">
					<img src="images/top-right-pic.png" alt="">
				</div>
				<div class="m-r flex-1">
					投资决策主力版套餐为您提供投资决策资金流向、投资决策决策信号、信号、投资决策深资决策深资决策深资决策深
				</div>
			</div>
			<div class="bottom">
				<div class="b-l">产品编号：CP0101</div>
				<div class="b-r">2980/年</div>
			</div>
		</div>

	</div>
	<div class="list-wrap hidden">已生效</div>
	<div class="list-wrap hidden">待支付</div>
	<div class="list-wrap hidden">已解约</div>
	<div class="list-wrap hidden">已到期</div>
</div>
<script src="js/lib/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/lib/hammer.min.js" type="text/javascript"></script>
<script src="js/lib/jquery.hammer.js" type="text/javascript"></script>
<script>
var myOrder={
	init: function(){
		// 兼容按压效果
		document.body.addEventListener('touchstart', function () { //...空函数即可
		});
	},
	events: function(){
		$('.top .nav').hammer().on('tap',function(){
			var _index = $('.top .nav').index($(this));

			$(this).addClass('active').siblings('.nav').removeClass('active');
			$('.list-wrap').eq(_index).show().siblings('.list-wrap').hide();
		});
	},
	run: function(){
		this.init();
		this.events();
	}
};
myOrder.run();
</script>
</body>
</html>